<template>
  <erp-form-popover
    :title="title"
    :field="field"
    :value="value"
    :props="props"
    :extra="extraCom"
    :options="computedOptions"
    :form="form"
    @value-change="handleValueChange"
    @update-id-field="handleUpdateField"
  />
</template>

<script>
import ErpFormPopover from './ErpFormPopover';
/**
 * 客户颜色选择
 * @author maolin
 */
export default {
  name: "ErpFormColor",
  components: {
    ErpFormPopover
  },
  props: {
    /**
     * 标题
     * @public
     */
    title: {
      type: String,
      default: '',
    },
    /**
     * 字段
     * @public
     */
    field: {
      type: String,
      default: ''
    },
    /**
     * 值
     * @public
     */
    value: {
      type: [Number, String, Object, Array],
      default: null
    },
    /**
     * 属性
     * @public
     */
    props: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 额外配置
     * ```js
     * return {
        // 表单需要的id字段
        idField: '',
        inputPlaceholder: '颜色',
        modalTitle: '',
        modalWidth: null,
        modalHeight: null,
        // 模态框表格中name对应的字段名
        modalNameField: null,
        // 模态框表格中id对应的字段名
        modalIdField: null,
        // 是否转换为字符串
        needToString: false,
        // 客户id
        customerId: null,
        // 关联额外字段，除了id和name之外还需要关联字段时
        extraData: [
          // {
          //     // 外部id
          //     field: "userId",
          //     // 内部id
          //     relatedField: "id",
          // }
        ]
      };
     * ```
     * @public
     */
    extra: {
      type: Object,
      default () {
        return {
        };
      }
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
    };
  },
  computed: {
    materialTypeId () {
      return this.extra && this.extra.materialTypeId ? this.extra.materialTypeId : 15;
    },
    extraCom () {
      let defaultConfig = {
        // 表单需要的id字段
        idField: '',
        inputPlaceholder: '颜色',
        modalTitle: '',
        modalWidth: null,
        modalHeight: null,
        // 模态框表格中name对应的字段名
        modalNameField: null,
        // 模态框表格中id对应的字段名
        modalIdField: null,
        // 是否转换为字符串
        needToString: false,
        // 客户id
        customerId: null,
        // 关联额外字段，除了id和name之外还需要关联字段时
        extraData: [
          // {
          //     // 外部id
          //     field: "userId",
          //     // 内部id
          //     relatedField: "id",
          // }
        ]
      };
      return Object.assign(defaultConfig, this.extra);
    },
    computedOptions () {
      let options = {
        "type": "singleSelect",
        "title": "物料管理",
        "table": {
          "props": {
            "resizable": true
          },
          "permissions": ["basBizColor:basBizColorList"],
          "rowKey": "id",
          "list": [
          ],
          "fields": [
            {"label": "色号",  "fixed": null, "prop": "bizColorCode", "sortable": "custom"},
            {"label": "颜色",  "fixed": null, "prop": "bizColorName", },
          ],
          "border": false,
          "showPagination": true,
          "showOrderNumber": false,
          "selectable": false,
          "defaultExpandAll": true,
          "showExport": false,
          "customColumn": false,
          "operationWidth": "100"
        },
        "search": {
          "form": {
            "materialId": 1,
            "pageOrderBy": null,
            "pageOrderDir": null,
            "pageIndex": 1,
            "pageSize": 30
          },
          "showKeywordQuery": false,
          "headSearchPlaceholder": "",
          "showAdvancedQuery": false,
        },
        "apiList": {
          "list": "/PBinvOrderInit/invOrderInitAddInitPBBasBizUserColor",
          "dataSourceApi": {
            "url": ""
          }
        },
        "components": {
        },
        "buttons": [
        ]
      };
      return options;
    }
  },
  watch: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    /**
     * 表单值更新
     * @param {string|number} value 值
     * @public
     */
    handleValueChange (value) {
      this.$emit('value-change', value);
    },
    /**
     * 表单其他值对象更新
     * @param {object} obj 值
     * @public
     */
    handleUpdateField (obj) {
      this.$emit('update-id-field', obj);
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
